<template>
    <!-- 修改资料 -->

    <div>
        <el-form label-width="85px" :model="form" label-position="right" ref="formRef" :rules="formRules" disabled class="borderNone">
            <el-row>
                <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
                    <el-form-item label="编号" prop="number">
                        <el-input v-model="form.number"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
                    <el-form-item label="名称" prop="name">
                        <el-input v-model="form.name"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
                    <el-form-item label="供应商">
                        <el-input v-model="form.custName"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
                    <el-form-item label="顺序" prop="itemIndex">
                        <el-input-number v-model="form.itemIndex" :min="0" />
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
                    <el-form-item label="附件">
                        <el-form-item label="上传附件">
                        <el-image v-if="checkType(form) == 'image'" alt="上传图片" :src="form.fileFullPath"
                        :preview-src-list="srcList" style="width: 30%;"></el-image>
                        <video style="width: 30%;" v-else-if="checkType(form) == 'video'" :src="form.fileFullPath"
                            controls></video>
                        <span v-else>{{ form.fileName }}</span>
                    </el-form-item>
                </el-form-item>
                </el-col>
                <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
                    <el-form-item label="状态" prop="status">
                        <el-switch v-model="form.status" size="large" inline-prompt :active-icon="Check"
                            :inactive-icon="Close" active-value="normal" inactive-value="disable" />
                    </el-form-item>
                </el-col>
            </el-row>

            <el-form-item label="备注" prop="remark">
                <el-input v-model="form.remark" type="textarea"></el-input>
            </el-form-item>
        </el-form>
        <div class="button-position">
            <el-button @click="updateVisible">取 消</el-button>
        </div>
    </div>
</template>
  
<script setup>
import { reactive, ref,onMounted } from "vue";
import { ElNotification } from "element-plus";
import { Check, Close } from '@element-plus/icons-vue';
import { checkType } from '@/utils/checkType.js'
import Api from '@/api/model/pm'
const emit = defineEmits(['updatetable'])
const props = defineProps({
    paramsData: {
        type: Object,
        defalut: {}
    }
})
const form = ref({
    number: "",
    name: "",
    custId: "",
    status: "normal",
    remark: "",
    itemIndex: 1,
    file:undefined
});
const srcList = ref([])
const formRef = ref();
const formRules = reactive({
    number: [{ required: true, message: "请输入编号", trigger: "blur" }],
    name: [{ required: true, message: "请输入名称", trigger: "blur" }],
});

onMounted(()=>{
    getInit()
})

const getInit = async() =>{
    console.log(props.paramsData)
    let res = await Api.brand.detail.post(props.paramsData)
    console.log(res)
    if(res.code == 200){
        form.value = res.data
        srcList.value.push(res.data.fileFullPath)
    }
}
const updateVisible = (val) => {
    emit('updatetable')
};

</script>
  
<style lang="less" scoped>
.borderNone {
    :deep(.el-input__wrapper) {
        box-shadow: 0 0 0 0px var(--el-input-border-color, var(--el-border-color)) inset;
        cursor: default;
        background-color: transparent; //背景颜色透明
        border-bottom: 1px solid #999;
        border-radius: 0;

        .el-input__inner {
            cursor: default !important;
        }
    }
    :deep(.el-textarea__inner) {
            box-shadow: 0 0 0 0px var(--el-input-border-color, var(--el-border-color)) inset;
            cursor: default;
            background-color: transparent; //背景颜色透明
            border-bottom: 1px solid #999;
            border-radius: 0;
        }
}
</style>
  
  